layui.use(['layer', 'table', 'element'], function () {
    let layer = layui.layer //弹层
        , table = layui.table //表格


    //第一个实例
    table.render({
        elem: '#feedbackList'
        ,url: '/feedback/list' //数据接口
        ,request: {
            pageName: 'pageNum' //页码的参数名称，默认：page
            , limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        ,page: { //开启分页
            limit: 6,
            limits: [6, 8, 10]
        }
        ,toolbar: '#headerBar'
        ,cols: [
            [ //表头
            {type: 'numbers', title: '序号', align: 'center', width: 60},
            {field: 'id', title: 'ID', align: 'center', width: 80}
            ,{field: 'name', title: '用户', align: 'center', width: 130, templet: function (d) {
                    console.log("name:" + d.name);
                    if(d.name === undefined || d.name === '') {
                        return "匿名";
                    } else {
                        return d.name;
                    }
                }}
            ,{field: 'email', title: '联系邮箱', align: 'center'}
            ,{field: 'content', title: '反馈内容', align: 'center'}
            ,{field: 'created', title: '反馈时间', align: 'center'}
            ,{field: 'status', title: '状态', align: 'center', width: 140,
                templet: function (d) {
                    if (d.status === 0) {
                        return "<button class='layui-btn layui-btn-sm layui-btn-radius' disabled style='background-color: #91ceff'>未浏览</button>";
                    }else if (d.status === 1) {
                        return "<button class='layui-btn layui-btn-sm layui-btn-radius' disabled style='background-color: #a3de83'>已浏览</button>";
                    } else if(d.status === 2) {
                        return "<button class='layui-btn layui-btn-sm layui-btn-radius' disabled style='background-color: #f6a9ce'>已回复</button>";
                    }
                }}
            ,{align: 'center', title: '操作', toolbar: '#feedbackListBar', unresize: 'true', }
        ]
        ]
        ,parseData: function (res) {
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
            };
        }
    });


    // 工具头
    table.on('toolbar(feedbackTable)', function(obj){
        switch (obj.event) {
            case 'refresh': // 单击了刷新按钮
                            // 表格重载
                table.reload('feedbackList', {
                    url: '/feedback/list', //数据接口
                    request: {
                        pageName: 'pageNum' //页码的参数名称，默认：page
                        , limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    , page: { //开启分页
                        curr: 1,
                        limit: 6,
                        limits: [6, 8, 10]
                    }
                })
                break;
        }
    });


    // 工具条（监听行）
    table.on('tool(feedbackTable)', function(obj){
        let data = obj.data;    // 获取当前行数据
        let layEvent = obj.event;   // 获取lay-event对应的值（show、agree、delete）
        switch(obj.event){
            case 'check':   // 查看
                toCheck(data);
                break;
            case 'reply':  // 回复
                toReply(data);
                break;
            case 'delete':  // 删除
                deleteFeedback(data, obj);
                break;
        };
    });


    // 浏览，设置状态为1
    function toCheck(data) {
        layer.open({
            title: '查看评论'
            ,content: data.content
            ,shadeClose: true
        });

        //监听行单击事件
        table.on('row(feedbackTable)', function(obj){
            //同步更新缓存对应的值（这样就不用请求刷新）
            obj.update({
                status: 1
            });
        });

        $.ajax({
            url: '/feedback/update',
            type: 'post',
            data: JSON.stringify({id: data.id, status: 1}),
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                console.log("查看操作返回的结果：" + result);
            }
        })
    }

    // 回复，设置状态为2，发送模板邮件
    function toReply(data) {
        // 打开iframe层
        layer.open({
            type: 2,
            title: '回复邮件',
            area: ['800px', '560px'],
            resize: false,
            offset: ['70px', '200px'],
            content: '/feedback/get?id=' + data.id,
            btn: ["关闭"]
        })
    }

    // 删除反馈
    function deleteFeedback(data, obj) {
        layer.confirm('确定<span style="color: red">删除</span>该反馈嘛？', {icon: 3, title: '警告'},
            function (index) {
                $.ajax({
                    url: '/feedback/delete',
                    type: 'post',
                    data: JSON.stringify({id: data.id}),
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data) {
                        if (data !== 0) {
                            layer.msg('删除成功！', {icon: 1, time: 1300}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg('删除失败！', {icon: 0, time: 1600}, function () {
                            });
                        }
                    },
                    error: function () {
                        layer.msg("服务器开小差了……", {icon: 2, anim: 6});
                    }
                })
            });
    }

});